<template>
  <div class="container">
    <div class="header-box">
      <h3><span>规则查询</span></h3>
      <div class="form-box">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
          <el-form-item label="规则编码">
            <el-input v-model="formInline.user" placeholder="请输入规则编码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="规则名称">
            <el-input v-model="formInline.user" placeholder="请输入规则名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="内容体载">
            <el-select v-model="formInline.region" placeholder="全部" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker size="mini"
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="全部" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="">搜索</el-button>
            <el-button size="mini" @click="">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div class="main-box">
      <div class="table-top">
        <el-button type="primary" size="mini" @click="">新建</el-button>
        <el-button size="mini">批量操作</el-button>
        <el-button size="mini" style="float: right;">导出</el-button>
      </div>
      <el-table :data="tableData" border stripe size="mini" style="width: 100%">
        <el-table-column prop="code" label="序号" align="center" width="100"></el-table-column>
        <el-table-column prop="name" label="规则名称" align="center" width="250"></el-table-column>
        <el-table-column prop="date" label="创建时间" align="center" width="100"></el-table-column>
        <el-table-column prop="type" label="规则分类" align="center" width="100"></el-table-column>
        <el-table-column prop="amount" label="规则描述" align="center"></el-table-column>
        <el-table-column prop="status" label="规则状态" align="center" width="100"></el-table-column>
        <el-table-column prop="execute" label="执行操作" align="center" width="100">
          <template slot-scope="scope">
                    <span class="play-box" v-if="scope.row.execute==1">
                        <img src="/play1.png"/>
                      <!--                        <img src="/zhan2.png"/>-->
                        <img src="/ting2.png"/>
                    </span>
            <span class="play-box" v-if="scope.row.execute==2">
                        <img src="/play1.png"/>
              <!--                        <img src="/zhan2.png"/>-->
                        <img src="/ting1.png"/>
                    </span>
            <span class="play-box" v-if="scope.row.execute==3">
                        <img src="/play2.png"/>
              <!--                        <img src="/zhan2.png"/>-->
                        <img src="/ting2.png"/>
                    </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="">查看</el-button>
            <el-button size="mini" @click="">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background
                     @size-change=""
                     @current-change=""
                     :current-page="1"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="10">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'ruleManage',
  data() {
    return {
      value1: '',
      currentPage4: 1,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        code: 11,
        name: '值域校验',
        date: '2024-07-08',
        type: '有效性校验',
        amount: '根据数据元值域进行校验',
        status: '启用',
        execute: 1
      }, {
        code: 10,
        name: '空值校验',
        date: '2024-07-08',
        type: '完整性校验',
        amount: '根据选填必填进行校验',
        status: '启用',
        execute: 1
      }, {
        code: 9,
        name: '正则校验',
        date: '2024-07-08',
        type: '有效性校验',
        amount: '设置正则表达式进行值域校验',
        status: '启用',
        execute: 1
      }, {
        code: 8,
        name: '唯一性校验',
        date: '2024-07-08',
        type: '唯一性校验',
        amount: '数据元值需要唯一存在',
        status: '启用',
        execute: 1
      }, {
        code: 7,
        name: '产品品种一致性校验',
        date: '2024-07-08',
        type: '合规性校验',
        amount: '产品码前缀、产品主要技术参数、分类继承品神',
        status: '启用',
        execute: 1
      }, {
        code: 6,
        name: '一物多码校验',
        date: '2024-07-08',
        type: '合规性校验',
        amount: '产品码和品种的需要唯一存在',
        status: '启用',
        execute: 1
      }, {
        code: 5,
        name: '映射关系校验',
        date: '2024-07-08',
        type: '合规性校验',
        amount: '关联爹考号在库中存在，并关联详情',
        status: '启用',
        execute: 1
      }, {
        code: 4,
        name: '基准名称一致性校验',
        date: '2024-07-08',
        type: '合规性校验',
        amount: '关联基准名称在库中存在，并关联诊情',
        status: '启用',
        execute: 1
      }, {
        code: 3,
        name: '基准名称关联模型一致性校验',
        date: '2024-07-08',
        type: '合规性校验',
        amount: '基准名称关默模型在席中存庄，幷关联详请',
        status: '启用',
        execute: 1
      }, {
        code: 2,
        name: '所属分类一致性校验',
        date: '2024-07-08',
        type: '合规性校验',
        amount: '心品册属分提在库中存在，并关联详居',
        status: '启用',
        execute: 1
      }]
    }
  }
}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>

.play-box {
  img {
    display: inline-block;
    width: 15px;
    margin: 0 5px;
  }
}
</style>
